<template>
  <div class="battle">
    <div class="battle-top">
      <span class="player">
        <span class="playerName" v-if="match.clash_info.team_name_a == '' || match.clash_info.team_name_a == null">
          <span class="name">{{ match.clash_info.name_a }}</span>
          <span v-if="match.clash_info.one_limit_a">
            ({{ match.clash_info.one_limit_a.substring(0, 4) }}<span v-if="match.clash_info.one_limit_a.length > 4">..</span>)
          </span>
          <van-icon v-if="match.status == 3 && match.clash_info.sign_id_a == match.winner_id" name="success" color="#42B574" />
        </span>
        <span class="playerName" v-if="match.clash_info.team_name_a != null && match.status != 2">
          <span class="name">{{ match.clash_info.name_a }}</span>
          -
          <span style="font-size: 0.2rem;">{{ match.clash_info.team_name_a }}</span>
          <van-icon v-if="match.status == 3 && match.clash_info.sign_id_a == match.winner_id" name="success" color="#42B574" />
        </span>
        <span class="playerName" v-if="match.clash_info.team_name_a != null && match.status == 2">
          <span class="name">{{ match.clash_info.name_a }}</span>
          -
          <span style="font-size: 0.2rem;">{{ match.clash_info.team_name_a }}</span>
          <van-icon v-if="match.status == 3 && match.clash_info.sign_id_a == match.winner_id" name="success" color="#42B574" />
        </span>
        <span v-if="match.status == 3 && match.waiver_user == match.clash_info.sign_id_a">
          <span style="color: red;">(弃)</span>
        </span>
      </span>
      <div class="score">
        <i class="iconfont icon-yuan green" v-if="match.clash_info.user_id_a ? match.clash_info.user_id_a.indexOf(match.serve_user) >= 0 && match.status == 2 : false"></i>
        <div v-for="(round_nums, index) in match.round_num" :key="index" style="display: flex;justify-content: flex-end;">
          <div class="point" v-if="match.round_num[index].top !== ''">
            {{ match.round_num[index].top }}
            <i v-if="match.round_num[index].tiebreak && match.round_num[index].top < match.round_num[index].bot">{{ match.round_num[index].tiebreak }}</i>
          </div>
        </div>
        <div class="point" v-if="match.status == 2">{{ match.score_num ? match.score_num.split(':')[0] : '' }}</div>
      </div>
    </div>
    <div class="battle-line"></div>
    <div class="battle-bot">
      <span class="player">
        <span class="playerName" v-if="match.clash_info.team_name_b == '' || match.clash_info.team_name_b == null">
          <span class="name">{{ match.clash_info.name_b }}</span>
          <span v-if="match.clash_info.one_limit_b">
            ({{ match.clash_info.one_limit_b.substring(0, 4) }}<span v-if="match.clash_info.one_limit_b.length > 4">..</span>)
          </span>
          <van-icon v-if="match.status == 3 && match.clash_info.sign_id_b == match.winner_id" name="success" color="#42B574" />
        </span>
        <span class="playerName" v-if="match.clash_info.team_name_b != null && match.status != 2">
          <span class="name">{{ match.clash_info.name_b }}</span>
          -
          <span style="font-size: 0.2rem;">{{ match.clash_info.team_name_b }}</span>
          <van-icon v-if="match.status == 3 && match.clash_info.sign_id_b == match.winner_id" name="success" color="#42B574" />
        </span>
        <span class="playerName" v-if="match.clash_info.team_name_b != null && match.status == 2">
          <span class="name">{{ match.clash_info.name_b }}</span>
          -
          <span style="font-size: 0.2rem;">{{ match.clash_info.team_name_b }}</span>
          <van-icon v-if="match.status == 3 && match.clash_info.sign_id_b == match.winner_id" name="success" color="#42B574" />
        </span>
        <span v-if="match.status == 3 && match.waiver_user == match.clash_info.sign_id_b">
          <span style="color: red;">(弃)</span>
        </span>
      </span>
      <div class="score">
        <i class="iconfont icon-yuan green" v-if="match.clash_info.user_id_b ? match.clash_info.user_id_b.indexOf(match.serve_user) >= 0 && match.status == 2 : false"></i>
        <div v-for="(round_num, index) in match.round_num" :key="index" style="display: flex;justify-content: flex-end;">
          <div class="point" v-if="match.round_num[index].bot !== ''">
            {{ match.round_num[index].bot }}
            <i v-if="match.round_num[index].tiebreak && match.round_num[index].bot < match.round_num[index].top">{{ match.round_num[index].tiebreak }}</i>
          </div>
        </div>
        <div class="point" v-if="match.status == 2">{{ match.score_num ? match.score_num.split(':')[1] : '' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "battle",
    data() {
      return {
        ballSite: 0
      };
    },
    props: {
      match: Object,
      table: Boolean
    }
  };
</script>

<style lang="less" scoped>
  .green {
    font-size: 0.24rem;
    width: 0.5rem;
    line-height: 0.5rem;
    height: 100%;
    text-align: center;
    color: #8bc34a;
  }

  .battle {
    margin: 0.15rem 0 0.12rem 0;

    .battle-top {
      height: 0.4rem;
      line-height: 0.4rem;
    }

    .battle-line {
      height: 0.04rem;
      background: #bbbbbb;
    }

    .battle-bot {
      height: 0.5rem;
      line-height: 0.5rem;
    }

    .player {
      float: left;
      text-align: left;
      display: flex;

      .playerName {
        font-weight: bold;
        font-size: 0.25rem;
        display: flex;

        .name {
          display: inline-block;
          max-width: 3.1rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        i {
          padding-top: 5px;
        }
      }
    }

    .score {
      display: flex;
      justify-content: flex-end;
      height: 0.4rem;

      .point {
        width: 0.4rem;
        border-left: 0.02rem solid #bbbbbb;
        font-weight: bold;
        position: relative;

        i {
          font-style: normal;
          position: absolute;
          top: -4px;
          font-size: 0.24rem;
          font-weight: 400;
        }
      }
    }
  }
</style>
